<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5表单验证</title>
    <style>
        form {
            margin:auto;
            width: 300px;
            border: 1px solid #ccc;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        label {
            font-weight: bold;
        }

        input[type="submit"] {
            width: 100px;
        }
    </style>
</head>

<body>
    <h2 align="center">项目实战</h2>
    <h3>HTML5表单验证</h3>
    <form >
        <label for="realName">真实姓名</label>
        <input type="text" id="realName" name="realName" required><br>

        <label for="competitionItem">比赛项目</label>
        <input type="text" id="competitionItem" name="competitionItem" required><br>

        <label for="email">电子邮箱</label>
        <input type="email" id="email" name="email" required><br>

        <label for="phone">手机号码</label>
        <input type="tel" id="phone" name="phone" pattern="[0-9]{11}" required><br>

        <label for="idCard">身份证号</label>
        <input type="text" id="idCard" name="idCard" pattern="^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[0-9Xx]$" required><br>

        <label for="birthDate">出生年月</label>
        <input type="month" id="birthDate" name="birthDate" required><br>

        <label for="expectedRank">名次期望</label>
        <input type="range" id="expectedRank" name="expectedRank" min="1" max="10" value="5"><br>

        <input type="submit" value="提交表单">
    </form>
</body>